<template>
	<view class="mainbgc">
		<header-top :messageInfo="{typeFlag:true,message:'代下单',liner:false}">
			<view class="rightmsg" slot="rightmsg">
				<view class="rightmsg_content">
					<view class="nostrongtext">结算</view>
				</view>
			</view>
		</header-top>
		<!-- 客户信息 -->
		<view class="flexbetween mainpadding">
			<view class="flexleft">
				<view class="tupian"></view>
				<view class="bigtext">选择代下单客户</view>
			</view>
			<view class="greenlittle"></view>
		</view>
		<!-- 商品 -->
		<view class="ffffff">
			<view class="flexbetween mainpadding">
				<view class="bigtext flex1">商品名称</view>
				<view class="bigtext flex2 flexcenter">规格</view>
				<view class="bigtext flex1">数量</view>
				<view class="bigtext flex1 flexcenter">金额</view>
			</view>
			<view class=" mainpadding2 " v-for="item in 4">
				<view class="shangpin flexbetween">
					<view class="shangtext flex1">可乐</view>
					<view class="shangtext flex2 flexcenter">24盒/360ml</view>
					<view class="shangtext flex1">X1箱</view>
					<view class="jine flex1 flexcenter">￥363</view>
				</view>
				<view class="flexbetween margin_topx">
					<view class="huisetext">
						备注：陈列
					</view>
					<view class="lansetext">
						赠品
					</view>
				</view>
			</view>
			<view class="shangpin flexbetween mainpadding2">
				<view class="bigtext flex1">合计：</view>
				<view class="bigtext flex2 flexcenter">6381种</view>
				<view class="bigtext flex1">100箱</view>
				<view class="bigtext jine flex1 flexcenter" style="color: #0BCB41;">￥3363</view>
			</view>
		</view>
		<view class="bottomipt flexbetween">
			<view class="flexleft bigtext">
				备注：<input class="ipt" type="text" placeholder="请输入您的备注">
			</view> 
		</view>
		<!-- 计数量 -->
		<!-- <view class="heji mainpadding">合计: 
			<text class="hejils">155.00</text>
		</view> -->
		<!-- 底部 -->
		<view class="ffffff dibu flexbetween">
			<view class="shuruk flexbetween">
				<input type="text" class="inputs" placeholder="输入商品首拼/编号" disabled>
				<view class="tianjia">添加</view>
			</view>
			<view class="scan2" ></view> 	
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		methods: {

		}
	}
</script>

<style lang="scss" scoped>
	.heji{
		text-align: right;
		font-size: 24rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #000000;
	}
	.hejils{
		color:#0BBDCB;
		margin-left: 6rpx;
	}
	.jine{
		font-size: 28rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: #0BBDCB;
	}
	.flex2{
		flex: 2.5;
	}
	.flex1{
		flex: 1;
	}
	.dibu {
		width: 100%;
		padding: 30rpx 30rpx;
		position: fixed;
		z-index: 1000;
		bottom: 0;
		left: 0;
		box-sizing: border-box;
	}
	.shuruk {
		width: 90%;
		background: rgba(217, 217, 217, .2);
		border-radius: 74rpx;
	}
	
	.inputs {
		height: 62rpx;
		width: 70%;
		font-size: 28rpx;
		padding-left: 44rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #999999;
	}
	.tianjia {
		height: 62rpx;
		width: 136rpx;
		background: rgba(11, 189, 203, .1);
		font-size: 28rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #0BBDCB;
		border-radius: 98px 98px 98px 98px;
	}
	.dibubox{
		padding: 30rpx 30rpx 74rpx;
		width: 100%;
		position: fixed;
		bottom: 0;
		left: 0;
		box-sizing: border-box;
	}
	.tijiaobtn{
		width: 198rpx;
		height: 62rpx;
		background: #885FFB;
		border-radius: 74rpx;
		font-size: 28rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #FFFFFF;
		margin-left: 30rpx;
	}
	.zise{
		font-size: 28rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #885FFB;
	}
	.shangpin{
		padding-bottom: 30rpx;
		border-bottom: 1px solid rgba(153, 153, 153, 0.05);
	}
	.tupian {
		width: 90rpx;
		height: 90rpx;
		border-radius: 50%;
		margin-right: 18rpx;
		background: #D9D9D9;
	}

	.bigtext {
		font-size: 32rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #000000;
	}

	.shangtext {
		font-size: 28rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #000000;
	}
	.huisetext {
		font-size: 24rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #999999;
	}
	.lansetext {
		font-size: 24rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: #999999;
	}
	.margin_topx{
		margin-top: 10rpx;
		padding-right: 36rpx;
	}
	.bottomipt{
		margin: 20rpx 0;
		background-color: #fff;
		padding: 20rpx 30rpx;
	}
	.ipt{
		margin-left: 50rpx;
	}
</style>
